<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function cancelFocus(upid) {
				var u = $("[name='"+upid+"']").attr("id");
				top.window.location.href = "/cancelFocus/"+u;
			}
			function focusUp(upid) {
				var u = $("[name='"+upid+"']").attr("id");
				top.window.location.href = "/focusUp/"+u;
			}
			function space(){
				let uid = $("span[name=1]").attr("id")
				top.window.location.href="/findUserById/"+ uid
			}
		</script>
		
		<!--移动设备优先-->
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		
		<!--引入Bootstrap CSS-->
		<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
		
		<style>
			.user{
				width:30px;
				height:30px;
				border-radius: 50%;
				border: #000000 1px solid;
			}
			.profile{
				width:70px;
				height:70px;
				border-radius: 50%;
				border: #000000 1px solid;
			}
			.col-8,.col-4,.col-sm-12,.col-md-4{
				background-color: #9FCDFF;
				border: #000000 1px solid;
			}
		</style>
	</head>
	<body>
		<span th:each="user,in:${page.beanList}">
			<span th:id="${user.uid}" th:name="${in.count}" />
<!--			<span th:text="${in.count}"/>-->
<!--			<span th:text="${user.uid}"/>-->
			<ul class="list-unstyled">
				<li class="media my-2 ml-3">
					<img src="../img/70_70.jpg" class="mr-3 profile" alt="...">
					<div class="media-body">
						<a href="#" th:onclick="|javascript:space()|"><h5 class="mt-0 mb-1" th:text="${user.nickname}"></h5></a>
						<small class="text-muted" >该用户没有留下什么</small>
						<button type="button" class="btn btn-secondary float-right mr-5" th:if="${user.temp==true}" th:onclick="|javascript:cancelFocus(${in.count})|">取消关注</button>
						<button type="button" class="btn btn-secondary float-right mr-5" th:unless="${user.temp==true}" th:onclick="|javascript:focusUp(${in.count})|">关注</button>
					</div>
				</li>
				<hr />
			</ul>
		</span>

		<span th:if="${page.tr!=0}">
		<nav aria-label="Page navigation example">
			<ul class="pagination">
				<li class="page-item">
					<span class="page-link" href="#" aria-label="Previous" th:if="${page.pc==1}">
						<span aria-hidden="true">&laquo;</span>
					</span>
					<a class="page-link" href="#" aria-label="Previous" th:unless="${page.pc==1}" th:href="@{${page.url}}+@{&pc=}+${page.pc-1}">
						<span aria-hidden="true">&laquo;</span>
					</a>
				</li>
				<ul class="pagination" th:if="${page.tp<=6}">
					<span th:each="i:${#numbers.sequence(1,page.tp)}">
						<li class="page-item"><span class="page-link" th:if="${i==page.pc}">[[${i}]]</span></li>
						<li class="page-item"><a class="page-link" th:href="@{${page.url}}+@{&pc=}+@{${i}}" th:unless="${i==page.pc}">[[${i}]]</a></li>
					</span>
				</ul>
				<span th:unless="${page.tp<=6}">
					<ul class="pagination" th:if="${page.pc}-${2}<1">
						<span th:each="i:${#numbers.sequence(1,6)}">
							<li class="page-item"><span class="page-link" th:if="${i==page.pc}">[[${i}]]</span></li>
							<li class="page-item"><a class="page-link" th:href="@{${page.url}}+@{&pc=}+@{${i}}" th:unless="${i==page.pc}">[[${i}]]</a></li>
						</span>
					</ul>
					<span th:if="${page.pc}+${3}>${page.tp}">
						<ul class="pagination" th:with="open=${page.tp}-${5}">
							<span th:each="i:${#numbers.sequence(open,page.tp)}">
								<li class="page-item"><span class="page-link" th:if="${i==page.pc}">[[${i}]]</span></li>
								<li class="page-item"><a class="page-link" th:href="@{${page.url}}+@{&pc=}+@{${i}}" th:unless="${i==page.pc}">[[${i}]]</a></li>
							</span>
						</ul>
					</span>
					<span th:if="${page.pc}+${3}<=${page.tp} and ${page.pc}-${2}>=1">
						<ul class="pagination" th:with="open=${page.pc}-${2},close=${page.pc}+${3}">
							<span th:each="i:${#numbers.sequence(open,close)}">
								<li class="page-item"><span class="page-link" th:if="${i==page.pc}">[[${i}]]</span></li>
								<li class="page-item"><a class="page-link" th:href="@{${page.url}}+@{&pc=}+@{${i}}" th:unless="${i==page.pc}">[[${i}]]</a></li>
							</span>
						</ul>
					</span>
				</span>

				<li class="page-item">
					<span class="page-link" href="#" aria-label="Next" th:if="${page.pc==page.tp}">
						<span aria-hidden="true">&raquo;</span>
					</span>
					<a class="page-link" href="#" aria-label="Next" th:href="@{${page.url }}+@{&pc=}+${page.pc+1}" th:unless="${page.pc==page.tp}">
						<span aria-hidden="true">&raquo;</span>
					</a>
				</li>
				<li class="page-item"><span class="page-link">共[[${page.tp}]]页</span></li>
			</ul>
		</nav>
		</span>
		
		<!--引入 JavaScript文件和jQuery-->
		<!--引入顺序：jQuery，然后Popper.js，然后Bootstrap.js-->
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/js/bootstrap.bundle.js}"></script>
	</body>
</html>
